<template>
  <div class="recruit-maintainer">
    <div class="top">
      <div class="title">
        <h5>加入我们,月入过万不是梦</h5>
        <p>不愁没订单,收入翻一翻加入即可接单赚钱</p>
      </div>
    </div>
    <div class="formtable">
      <div class="tle">申 请 加 入 我 们</div>
      <div class="form">
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="邮箱" prop="maintainer_email">
            <el-input v-model="form.maintainer_email" placeholder="请输入邮箱"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" type="password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="nickname">
            <el-input v-model="form.nickname" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="form.gender">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model.number="form.age" placeholder="请输入年龄"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="服务地址" prop="service_address">
            <MyCascader ref="cascader" @sendData="handlerSendData"></MyCascader>
            <!-- <el-input v-model="form.service_address" placeholder="请输入服务地址"></el-input> -->
          </el-form-item>
          <el-form-item label="服务类型" prop="service_type">
            <el-select v-model="form.service_type" placeholder="请选择服务类型">
              <el-option label="家电维修" value="家电维修"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubimt">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import MyCascader from '@/components/userComponents/MyCascader.vue'
import { maintainerRegService } from '@/api/user'
export default {
  data () {
    return {
      form: {
        maintainer_email: '',
        password: '',
        nickname: '',
        gender: '',
        age: null,
        phone: null,
        service_address: '',
        service_type: ''
      },
      rules: {
        maintainer_email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^[/\S]{6,15}$/, message: '长度在 6 到 15 个非空字符', trigger: 'blur' }
        ],
        nickname: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        age: [
          { type: 'number', min: 18, max: 60, message: '年龄在18-60之间', trigger: 'blur' },
          { required: true, message: '请输入年龄', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[345789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        service_address: [
          { required: true, message: '请输入服务地址', trigger: 'blur' }
        ],
        service_type: [
          { required: true, message: '请选择服务类型', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    handlerSendData (data) {
      this.form.service_address = data.districts + data.city + data.county
    },
    async onSubimt () {
      this.$refs.cascader.sendData()
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return this.$message({
            type: 'error',
            message: '提交失败'
          })
        }
        this.maintainerReg()
        this.$message({
          type: 'success',
          message: '提交成功'
        })
        this.form = {}
      })
    },
    maintainerReg () {
      maintainerRegService(this.form)
    }
  },
  components: { MyCascader }
}
</script>

<style lang="less" scoped>
.recruit-maintainer {
    .top{
        // position: relative;
        width: 100%;
        height: 500px;
        background: url('@/assets/加入我们.jpg') no-repeat center center;
        background-size:cover;
        .title{
            position: relative;
            left: 0px;
            top: 140px;
            width: 50%;
            text-align: center;
            font-size: 68px;
            color: #fff;
            line-height: 80px;
            p{
                font-weight: 700;
                font-size: 28px;
                line-height: 45px;
            }
        }
    }
    .formtable{
        text-align: left;
        padding: 30px;
        // text-align: center;
        .tle{
            text-align: center;
            font-size: 28px;
            font-weight: bolder;
        }
        .form{
            margin: 30px auto;
            width: 51%;
            /deep/ .el-button{
                width: 100%;
            }
        }
    }
}
</style>
